<template>
  <div class="aside">
<div class="logoPic">
  <img src="../../../src/assets/imgs/log.jpg" alt="">
  <p>星星之火,可以燎原</p>
</div>
<div class="tagBox">
  <h5>文章标签</h5>
  <el-tag effect="dark">坂井泉水</el-tag>
  <el-tag effect="dark">坂井泉水</el-tag>
  <el-tag effect="dark">坂井泉水</el-tag>
  <el-tag effect="dark">坂井泉水</el-tag>
  <el-tag effect="dark">坂井泉水</el-tag>
  <el-tag effect="dark">坂井泉水</el-tag>
  <el-tag effect="dark">坂井泉水</el-tag>
 
</div>
<div>
  <h5 class="randText">随机毒鸡汤</h5>
  <span
    v-loading="loading"
    element-loading-spinner="el-icon-loading"
  >{{randMsg}}</span>
</div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        randMsg:'',
        loading:true
      }
    },
  async  mounted  () {
    const res = await this.$http.get('/randMsg')
   this.randMsg=res.data.data
   this.loading=false
    },
  }
</script>
<style lang="less">
  .el-loading-spinner i{
color: #888 !important;
font-size: 30px !important;
margin-top: 20px;
}
.el-loading-spinner{
  text-align: center;
}
.el-loading-mask{
  transition:none
}
</style>>

<style lang="less" scoped>

@keyframes lager {
  50%{
    transform: scale(0.8);
  }
}
.aside{
  position: fixed;
  top: 100px;
  width: 400px;
  height: 500px;
  // background-color: pink;
  left: 50%;
  transform: translateX(250px);
  text-align: center;
  .tagBox{
     border-bottom: 1px solid #eee;
     padding: 0 30px;
    padding-bottom: 20px;

    .el-tag{
    cursor: pointer;
    margin: 5px;
    border: none;

    &:nth-of-type(2n){
        background-color: #f84d78;
    }
     &:nth-of-type(3n){
        background-color: #d675c1;
    } 
    &:nth-of-type(4n){
        background-color: #49b0bb;
    } 
    &:nth-of-type(5n){
        background-color: red;
    }
  }
  }
  h5{
    margin:10px 0;
    color: #666;
  }
  
  .logoPic{
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;

    img{
      width: 360px;
      margin-bottom: 20px;
      animation: lager 2.3s infinite linear;
      border-radius: 5px;
    }
  }
  .randText span{
    font-weight: 700;
    padding: 0 40px;
    margin-top: 20px;
  }
}
</style>